<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>收藏夹</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../font/iconfont/iconfont.css">
    <link rel="stylesheet" href="../font/iconfont/iconfont.ttf">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/collectionFolder.css">
    <style></style>
</head>
<body>
<div class="header">
    <div class="header_container">
        <div class="user_name">
            <div class="title_zh">这里是用户名</div>
            <div class="title_en">username</div>
        </div>
        <div class="header_nav">
            <ul>
                <li>
                    <a href="#">
                        <div class="title_zh">首页</div>
                        <div class="title_en">Home</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="title_zh">购货车</div>
                        <div class="title_en">Purchase</div>
                    </a>
                </li>
                <li class="active">
                    <a href="#">
                        <div class="title_zh">收藏夹</div>
                        <div class="title_en">Collection</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="title_zh">联系客服</div>
                        <div class="title_en">Mine</div>
                    </a>
                </li>
                <li class="shop_search">
                    <div class="icon-font icon-search"></div>
                </li>
            </ul>
        </div>
        <!--搜索-->
        <div class="search_box">
            <input type="text" class="" placeholder="请输入搜索内容/Enter the search content">
            <div class="search_btn">
                <div class="title_zh">搜索</div>
                <div class="title_en">Search for</div>
            </div>
        </div>
    </div>
</div>
<div class="content">
    <div class="content_header_box">
        <div class="content_header">
            <div class="logo">
                <img src="" alt="">
            </div>
            <div class="page_title">
                <div class="title_zh">收藏夹</div>
                <div class="title_en">collection folder</div>
            </div>
            <div class="collection_nav">
                <div class="nav_btn">
                    <a href="#collectionProduct" data-toggle="tab">
                        <div class="title_zh">收藏商品</div>
                        <div class="title_en">Favorite Product</div>
                    </a>
                </div>
                <div class="nav_btn">
                    <a href="#collectionShop" data-toggle="tab">
                        <div class="title_zh">收藏店铺</div>
                        <div class="title_en">Favorite Shop</div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="content_container tab-content">
        <div class="collection_product_content tab-pane active" id="collectionProduct">
            <div class="content_bar">
                <div class="bar_btn">
                    <a href="">
                        <div class="title_zh">全部商品</div>
                        <div class="title_en">All Product</div>
                    </a>
                </div>
                <div class="bar_btn">
                    <a href="">
                        <div class="title_zh">失效商品</div>
                        <div class="title_en">Favorite Shop</div>
                    </a>
                </div>
            </div>
            <div class="all_product_list">
                <div class="good_area">
                    <a href="#">
                        <div class="good_img">
                            <img src="../image/shopImg/shop1.png" alt="">
                        </div>
                        <div class="good_info">
                            <div class="good_name">
                                <div class="title_zh">这是商品名</div>
                                <div class="title_en">product name</div>
                            </div>
                        </div>
                    </a>
                    <div class="good_price_box">
                        <div class="good_price">
                            <em>￡</em>
                            <span>134.00/kg</span>
                        </div>
                        <div class="good_delete icon-font icon-delete1"></div>
                    </div>
                </div>
                <div class="good_area">
                    <a href="#">
                        <div class="good_img">
                            <img src="../image/shopImg/shop1.png" alt="">
                        </div>
                        <div class="good_info">
                            <div class="good_name">
                                <div class="title_zh">这是商品名</div>
                                <div class="title_en">product name</div>
                            </div>
                        </div>
                    </a>
                    <div class="good_price_box">
                        <div class="good_price">
                            <em>￡</em>
                            <span>134.00/kg</span>
                        </div>
                        <div class="good_delete icon-font icon-delete1"></div>
                    </div>
                </div>
                <div class="good_area">
                    <a href="#">
                        <div class="good_img">
                            <img src="../image/shopImg/shop1.png" alt="">
                        </div>
                        <div class="good_info">
                            <div class="good_name">
                                <div class="title_zh">这是商品名</div>
                                <div class="title_en">product name</div>
                            </div>
                        </div>
                    </a>
                    <div class="good_price_box">
                        <div class="good_price">
                            <em>￡</em>
                            <span>134.00/kg</span>
                        </div>
                        <div class="good_delete icon-font icon-delete1"></div>
                    </div>
                </div>
                <div class="good_area">
                    <a href="#">
                        <div class="good_img">
                            <img src="../image/shopImg/shop1.png" alt="">
                        </div>
                        <div class="good_info">
                            <div class="good_name">
                                <div class="title_zh">这是商品名</div>
                                <div class="title_en">product name</div>
                            </div>
                        </div>
                    </a>
                    <div class="good_price_box">
                        <div class="good_price">
                            <em>￡</em>
                            <span>134.00/kg</span>
                        </div>
                        <div class="good_delete icon-font icon-delete1"></div>
                    </div>
                </div>
                <div class="good_area">
                    <a href="#">
                        <div class="good_img">
                            <img src="../image/shopImg/shop2.png" alt="">
                        </div>
                        <div class="good_info">
                            <div class="good_name">
                                <div class="title_zh">这是商品名</div>
                                <div class="title_en">product name</div>
                            </div>
                        </div>
                    </a>
                    <div class="good_price_box">
                        <div class="good_price">
                            <em>￡</em>
                            <span>134.00/kg</span>
                        </div>
                        <div class="good_delete icon-font icon-delete1"></div>
                    </div>
                </div>
                <div class="good_area">
                    <a href="#">
                        <div class="good_img">
                            <img src="../image/shopImg/shop3.png" alt="">
                        </div>
                        <div class="good_info">
                            <div class="good_name">
                                <div class="title_zh">这是商品名</div>
                                <div class="title_en">product name</div>
                            </div>
                        </div>
                    </a>
                    <div class="good_price_box">
                        <div class="good_price">
                            <em>￡</em>
                            <span>134.00/kg</span>
                        </div>
                        <div class="good_delete icon-font icon-delete1"></div>
                    </div>
                </div>
                <div class="good_area">
                    <a href="#">
                        <div class="good_img">
                            <img src="../image/shopImg/shop4.png" alt="">
                        </div>
                        <div class="good_info">
                            <div class="good_name">
                                <div class="title_zh">这是商品名</div>
                                <div class="title_en">product name</div>
                            </div>
                        </div>
                    </a>
                    <div class="good_price_box">
                        <div class="good_price">
                            <em>￡</em>
                            <span>134.00/kg</span>
                        </div>
                        <div class="good_delete icon-font icon-delete1"></div>
                    </div>
                </div>
                <div class="good_area">
                    <a href="#">
                        <div class="good_img">
                            <img src="../image/shopImg/shop1.png" alt="">
                        </div>
                        <div class="good_info">
                            <div class="good_name">
                                <div class="title_zh">这是商品名</div>
                                <div class="title_en">product name</div>
                            </div>
                        </div>
                    </a>
                    <div class="good_price_box">
                        <div class="good_price">
                            <em>￡</em>
                            <span>134.00/kg</span>
                        </div>
                        <div class="good_delete icon-font icon-delete1"></div>
                    </div>
                </div>
                <div class="good_area">
                    <a href="#">
                        <div class="good_img">
                            <img src="../image/shopImg/shop2.png" alt="">
                        </div>
                        <div class="good_info">
                            <div class="good_name">
                                <div class="title_zh">这是商品名</div>
                                <div class="title_en">product name</div>
                            </div>
                        </div>
                    </a>
                    <div class="good_price_box">
                        <div class="good_price">
                            <em>￡</em>
                            <span>134.00/kg</span>
                        </div>
                        <div class="good_delete icon-font icon-delete1"></div>
                    </div>
                </div>
                <div class="good_area">
                    <a href="#">
                        <div class="good_img">
                            <img src="../image/shopImg/shop3.png" alt="">
                        </div>
                        <div class="good_info">
                            <div class="good_name">
                                <div class="title_zh">这是商品名</div>
                                <div class="title_en">product name</div>
                            </div>
                        </div>
                    </a>
                    <div class="good_price_box">
                        <div class="good_price">
                            <em>￡</em>
                            <span>134.00/kg</span>
                        </div>
                        <div class="good_delete icon-font icon-delete1"></div>
                    </div>
                </div>
                <div class="good_area">
                    <a href="#">
                        <div class="good_img">
                            <img src="../image/shopImg/shop4.png" alt="">
                        </div>
                        <div class="good_info">
                            <div class="good_name">
                                <div class="title_zh">这是商品名</div>
                                <div class="title_en">product name</div>
                            </div>
                        </div>
                    </a>
                    <div class="good_price_box">
                        <div class="good_price">
                            <em>￡</em>
                            <span>134.00/kg</span>
                        </div>
                        <div class="good_delete icon-font icon-delete1"></div>
                    </div>
                </div>
                <div class="good_area">
                    <a href="#">
                        <div class="good_img">
                            <img src="../image/shopImg/shop1.png" alt="">
                        </div>
                        <div class="good_info">
                            <div class="good_name">
                                <div class="title_zh">这是商品名</div>
                                <div class="title_en">product name</div>
                            </div>
                        </div>
                    </a>
                    <div class="good_price_box">
                        <div class="good_price">
                            <em>￡</em>
                            <span>134.00/kg</span>
                        </div>
                        <div class="good_delete icon-font icon-delete1"></div>
                    </div>
                </div>
            </div>
            <div class="invalid_product_list">

            </div>
        </div>
        <div class="collection_shop_content tab-pane" id="collectionShop">
            <div class="all_product_list">
                <div class="good_area">
                    <a href="#">
                        <div class="good_img">
                            <img src="../image/shopImg/shop1.png" alt="">
                        </div>
                        <div class="good_info">
                            <div class="good_name">
                                <div class="title_zh">这是店铺名</div>
                                <div class="title_en">shop name</div>
                            </div>
                        </div>
                    </a>
                    <div class="score_bar">
                        <div class="score_title">
                            <div class="title_zh">评分</div>
                            <div class="title_en">score</div>
                        </div>
                        <div class="score_img">
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                        </div>
                        <div class="good_delete icon-font icon-delete1"></div>
                    </div>
                </div>
                <div class="good_area">
                    <a href="#">
                        <div class="good_img">
                            <img src="../image/shopImg/shop2.png" alt="">
                        </div>
                        <div class="good_info">
                            <div class="good_name">
                                <div class="title_zh">这是店铺名</div>
                                <div class="title_en">shop name</div>
                            </div>
                        </div>
                    </a>
                    <div class="score_bar">
                        <div class="score_title">
                            <div class="title_zh">评分</div>
                            <div class="title_en">score</div>
                        </div>
                        <div class="score_img">
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                        </div>
                        <div class="good_delete icon-font icon-delete1"></div>
                    </div>
                </div>
                <div class="good_area">
                    <a href="#">
                        <div class="good_img">
                            <img src="../image/shopImg/shop3.png" alt="">
                        </div>
                        <div class="good_info">
                            <div class="good_name">
                                <div class="title_zh">这是店铺名</div>
                                <div class="title_en">shop name</div>
                            </div>
                        </div>
                    </a>
                    <div class="score_bar">
                        <div class="score_title">
                            <div class="title_zh">评分</div>
                            <div class="title_en">score</div>
                        </div>
                        <div class="score_img">
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                        </div>
                        <div class="good_delete icon-font icon-delete1"></div>
                    </div>
                </div>
                <div class="good_area">
                    <a href="#">
                        <div class="good_img">
                            <img src="../image/shopImg/shop4.png" alt="">
                        </div>
                        <div class="good_info">
                            <div class="good_name">
                                <div class="title_zh">这是店铺名</div>
                                <div class="title_en">shop name</div>
                            </div>
                        </div>
                    </a>
                    <div class="score_bar">
                        <div class="score_title">
                            <div class="title_zh">评分</div>
                            <div class="title_en">score</div>
                        </div>
                        <div class="score_img">
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                        </div>
                        <div class="good_delete icon-font icon-delete1"></div>
                    </div>
                </div>
                <div class="good_area">
                    <a href="#">
                        <div class="good_img">
                            <img src="../image/shopImg/shop1.png" alt="">
                        </div>
                        <div class="good_info">
                            <div class="good_name">
                                <div class="title_zh">这是店铺名</div>
                                <div class="title_en">shop name</div>
                            </div>
                        </div>
                    </a>
                    <div class="score_bar">
                        <div class="score_title">
                            <div class="title_zh">评分</div>
                            <div class="title_en">score</div>
                        </div>
                        <div class="score_img">
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                        </div>
                        <div class="good_delete icon-font icon-delete1"></div>
                    </div>
                </div>
                <div class="good_area">
                    <a href="#">
                        <div class="good_img">
                            <img src="../image/shopImg/shop2.png" alt="">
                        </div>
                        <div class="good_info">
                            <div class="good_name">
                                <div class="title_zh">这是店铺名</div>
                                <div class="title_en">shop name</div>
                            </div>
                        </div>
                    </a>
                    <div class="score_bar">
                        <div class="score_title">
                            <div class="title_zh">评分</div>
                            <div class="title_en">score</div>
                        </div>
                        <div class="score_img">
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                        </div>
                        <div class="good_delete icon-font icon-delete1"></div>
                    </div>
                </div>
                <div class="good_area">
                    <a href="#">
                        <div class="good_img">
                            <img src="../image/shopImg/shop3.png" alt="">
                        </div>
                        <div class="good_info">
                            <div class="good_name">
                                <div class="title_zh">这是店铺名</div>
                                <div class="title_en">shop name</div>
                            </div>
                        </div>
                    </a>
                    <div class="score_bar">
                        <div class="score_title">
                            <div class="title_zh">评分</div>
                            <div class="title_en">score</div>
                        </div>
                        <div class="score_img">
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                        </div>
                        <div class="good_delete icon-font icon-delete1"></div>
                    </div>
                </div>
                <div class="good_area">
                    <a href="#">
                        <div class="good_img">
                            <img src="../image/shopImg/shop1.png" alt="">
                        </div>
                        <div class="good_info">
                            <div class="good_name">
                                <div class="title_zh">这是店铺名</div>
                                <div class="title_en">shop name</div>
                            </div>
                        </div>
                    </a>
                    <div class="score_bar">
                        <div class="score_title">
                            <div class="title_zh">评分</div>
                            <div class="title_en">score</div>
                        </div>
                        <div class="score_img">
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                        </div>
                        <div class="good_delete icon-font icon-delete1"></div>
                    </div>
                </div>
                <div class="good_area">
                    <a href="#">
                        <div class="good_img">
                            <img src="../image/shopImg/shop1.png" alt="">
                        </div>
                        <div class="good_info">
                            <div class="good_name">
                                <div class="title_zh">这是店铺名</div>
                                <div class="title_en">shop name</div>
                            </div>
                        </div>
                    </a>
                    <div class="score_bar">
                        <div class="score_title">
                            <div class="title_zh">评分</div>
                            <div class="title_en">score</div>
                        </div>
                        <div class="score_img">
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                        </div>
                        <div class="good_delete icon-font icon-delete1"></div>
                    </div>
                </div>
                <div class="good_area">
                    <a href="#">
                        <div class="good_img">
                            <img src="../image/shopImg/shop1.png" alt="">
                        </div>
                        <div class="good_info">
                            <div class="good_name">
                                <div class="title_zh">这是店铺名</div>
                                <div class="title_en">shop name</div>
                            </div>
                        </div>
                    </a>
                    <div class="score_bar">
                        <div class="score_title">
                            <div class="title_zh">评分</div>
                            <div class="title_en">score</div>
                        </div>
                        <div class="score_img">
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                        </div>
                        <div class="good_delete icon-font icon-delete1"></div>
                    </div>
                </div>
                <div class="good_area">
                    <a href="#">
                        <div class="good_img">
                            <img src="../image/shopImg/shop1.png" alt="">
                        </div>
                        <div class="good_info">
                            <div class="good_name">
                                <div class="title_zh">这是店铺名</div>
                                <div class="title_en">shop name</div>
                            </div>
                        </div>
                    </a>
                    <div class="score_bar">
                        <div class="score_title">
                            <div class="title_zh">评分</div>
                            <div class="title_en">score</div>
                        </div>
                        <div class="score_img">
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                        </div>
                        <div class="good_delete icon-font icon-delete1"></div>
                    </div>
                </div>
                <div class="good_area">
                    <a href="#">
                        <div class="good_img">
                            <img src="../image/shopImg/shop1.png" alt="">
                        </div>
                        <div class="good_info">
                            <div class="good_name">
                                <div class="title_zh">这是店铺名</div>
                                <div class="title_en">shop name</div>
                            </div>
                        </div>
                    </a>
                    <div class="score_bar">
                        <div class="score_title">
                            <div class="title_zh">评分</div>
                            <div class="title_en">score</div>
                        </div>
                        <div class="score_img">
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                            <div class="icon-font icon-iosstar"></div>
                        </div>
                        <div class="good_delete icon-font icon-delete1"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/common.js"></script>
<script>
    $(function() {
        bannerInit();
    });
    var ident = false;
    $('.shop_search').click(function () {
        if( false == ident){
            $('.search_box').show();
            ident = true;
        }else {
            $('.search_box').hide();
            ident = false;
        }
    })
    function openCollection() {
        $('.collection_box').show();
    }
    function closeCollection() {
        $('.collection_box').hide();
    }
</script>
</html>